<template>
  <view class="qc-scroll-wrap" :style="rootStyle">
    <MescrollUni
      ref="mescrollRef"
      :fixed="false"
      :up="upOption"
      :top="0"
      :bottom="0"
      :height="height"
      :noDataType="noDataType"
      @init="mescrollInit"
      @up="upCallback"
      @down="downCallback">
      <slot></slot>
    </MescrollUni>
    <slot name="nodata">
      <view
        v-if="noData && noDataType !== 'carData'"
        class="no-data-wrap"
        :style="`height: ${height}`">
        <view class="img"></view>
        <view class="text">暂无数据</view>
      </view>
      <view
        class="no-car"
        v-if="noData && noDataType == 'carData'"
        :style="`height: calc(100vh - ${top} - ${bottom})`">
        <view class="noCarImg"></view>
        <view class="text">尚未添加车辆哦！</view>
        <view class="text">添加车辆指定场站可享停车费减免！</view>
      </view>
    </slot>
  </view>
</template>

<script>
import MescrollUni from '@/uni_modules/mescroll-uni/mescroll-uni.vue';
import MescrollMixin from '@/uni_modules/mescroll-uni/mescroll-mixins.js';

const delay = () => new Promise(resolve => setTimeout(resolve, 450));

export default {
  mixins: [MescrollMixin], // 使用mixin
  components: {
    MescrollUni,
  },
  props: {
    top: {
      type: String,
      default: '0px',
      validator: val => val.endsWith('px'),
    },
    bottom: {
      type: String,
      default: '0px',
      validator: val => val.endsWith('px'),
    },
    height: {
      type: String,
      default: '100%',
      validator: val => val.endsWith('px'),
    },
    rootStyle: {
      type: String,
      default: '',
    },
    getData: {
      type: Function,
      required: true,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    noDataType: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      noData: false,
      upOption: {
        page: {
          size: this.pageSize, // 每页数据的数量,默认10
        },
        noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
        empty: {
          use: false,
          tip: '暂无相关数据',
        },
        textNoMore: '已加载全部数据',
        noDataType: '',
      },
    };
  },
  methods: {
    async upCallback(page) {
      const pageSize = page.size;
      const pageNum = page.num;
      // const arr = await Promise.all([this.getData({ pageSize, pageNum }), delay()]);
      const obj = await Promise.all([this.getData({ pageSize, pageNum }), delay()]);
      if (obj[0].list.length === 0) {
        this.noData = true;
      } else {
        this.noData = false;
      }
      // mescroll.endByPage(pageIndex);
      // mescroll.endErr();
      // mescroll.endSuccess(pageSize, true);
      console.log('arr--1111--', obj);
      const isNext = obj[0].total / pageSize > pageNum;
      setTimeout(() => {
        this.mescroll.endSuccess(obj[0].list.length, isNext);
      }, 20);
    },
    setList(data, total, page) {
      console.log('total===', total);
      console.log('total===', page);
      const pageSize = page.pageSize;
      const pageNum = page.pageNum;
      if (data.length === 0) {
        this.noData = true;
      } else {
        this.noData = false;
      }
      // this.mescroll.endBySize(data.length, total);
      const isNext = total / pageSize > pageNum;
      setTimeout(() => {
        this.mescroll.endSuccess(total, isNext);
      }, 20);
    },
    //重置列表为第一页，并滚动条置顶
    resetUpScroll() {
      this.mescroll.scrollTo(0, 0);
      this.mescroll.setPageNum(1);
      this.mescroll.resetUpScroll();
    },
  },
};
</script>

<style lang="scss">
.qc-scroll-wrap {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: none;
  position: relative;
  height: 100%;

  .no-data-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    .img {
      width: 201px;
      height: 184px;
      background-image: url($url + 'no-data.png');
      background-size: 100%;
      background-repeat: no-repeat;
      z-index: 1;
    }
    .text {
      margin-top: 20px;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.4);
      z-index: 1;
    }
  }
  .no-car {
    height: calc(100vh - 184px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    .noCarImg {
      // width: 201px;
      // height: 184px;
      width: 172px;
      height: 93px;
      background-image: url($url + 'mine/noCar.png');
      background-size: 100%;
      background-repeat: no-repeat;
      z-index: 1;
      align-self: center;
      margin-bottom: 25px;
    }
    .text {
      font-weight: 600;
      font-size: 14px;
      line-height: 22px;
      color: #545454;
      z-index: 1;
    }
  }
}
</style>